﻿<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:Controls="clr-namespace:FluidKit.Controls;assembly=FluidKit"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Samples="clr-namespace:FluidKit.Samples" x:Class="FluidKit.Samples.ElementFlow.ElementFlowExample"
             mc:Ignorable="d">
    <UserControl.Resources>
        <Samples:StringCollection x:Key="DataSource" />
        <LinearGradientBrush x:Key="ReflectionBrush"
                             StartPoint="0,0"
                             EndPoint="0,1">
            <GradientStop Offset="0"
                          Color="#7F000000" />
            <GradientStop Offset=".5"
                          Color="Transparent" />
        </LinearGradientBrush>

        <DataTemplate x:Key="TestDataTemplate"
                      DataType="{x:Type sys:String}">
            <Border x:Name="ElementVisual"
                    Background="White"
                    Padding="5"
                    BorderThickness="5"
                    BorderBrush="LightGray"
                    Grid.Row="0">
                <Image Source="{Binding}"
                       Stretch="Fill" />
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="TestDataTemplate_Reflection">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.5*" />
                    <RowDefinition Height="0.5*" />
                </Grid.RowDefinitions>

                <Border x:Name="ElementVisual"
                        BorderThickness="2"
                        BorderBrush="LightYellow"
                        Background="Black"
                        Padding="2">
                    <Image Source="{Binding}"
                           Stretch="Fill" />
                </Border>
                <Rectangle OpacityMask="{StaticResource ReflectionBrush}"
                           Grid.Row="1"
                           Height="{Binding ActualHeight, ElementName=ElementVisual}">
                    <Rectangle.Fill>
                        <VisualBrush Visual="{Binding ElementName=ElementVisual}">
                            <VisualBrush.RelativeTransform>
                                <ScaleTransform ScaleX="1"
                                                ScaleY="-1"
                                                CenterX="0.5"
                                                CenterY="0.5" />
                            </VisualBrush.RelativeTransform>
                        </VisualBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ItemTemplate">
            <Border BorderBrush="#FFB1B1B1"
                    BorderThickness="2"
                    Background="#7FFFFFFF"
                    Padding="0,20,0,0"
                    CornerRadius="3">
                <Image Source="{Binding Image}"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Stretch="Fill" />
            </Border>
        </DataTemplate>
    </UserControl.Resources>
    <Grid Background="#FF1A1A1A">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Vertical"
                    Grid.Row="1"
                    Grid.Column="0"
                    Margin="5">
            <Label Content="SelectedIndex" />
            <Slider x:Name="_selectedIndexSlider"
                    Minimum="0"
                    Value="0"
                    ValueChanged="ChangeSelectedIndex" />
            <Label Content="TiltAngle" />
            <Slider x:Name="_tiltAngleSlider"
                    Minimum="0"
                    Maximum="90"
                    Value="45" />
            <Label Content="ItemGap" />
            <Slider x:Name="_itemGapSlider"
                    Minimum="0.25"
                    Maximum="3"
                    Value="0.65" />
        </StackPanel>

        <StackPanel Orientation="Vertical"
                    Grid.Row="1"
                    Grid.Column="1"
                    Margin="5">
            <Label Content="FrontItemGap" />
            <Slider x:Name="_frontItemGapSlider"
                    Minimum="0"
                    Maximum="4.0" />
            <Label Content="PopoutDistance" />
            <Slider x:Name="_popoutDistanceSlider"
                    Minimum="-2.0"
                    Maximum="2.0"
                    Value="0.5" />
            <StackPanel Orientation="Horizontal"
                        Margin="0,10,0,0">

                <Button x:Name="_regular"
                        Click="AddCard"
                        Margin="0,0,10,0"
                        Content="Add Type A" />
                <Button x:Name="_alert"
                        Click="AddCard"
                        Margin="0,0,10,0"
                        Content="Add Type B" />
                <Button Click="RemoveCard"
                        Margin="0,0,10,0"
                        Content="Remove" />
            </StackPanel>
        </StackPanel>

        <Controls:ElementFlow x:Name="_elementFlow"
                              Grid.Row="0"
                              Grid.Column="0"
                              Grid.ColumnSpan="2"
                              ItemsSource="{DynamicResource DataSource}"
                              ItemTemplate="{DynamicResource TestDataTemplate}"
                              TiltAngle="{Binding Value, ElementName=_tiltAngleSlider}"
                              ItemGap="{Binding Value, ElementName=_itemGapSlider}"
                              FrontItemGap="{Binding Value, ElementName=_frontItemGapSlider}"
                              PopoutDistance="{Binding Value, ElementName=_popoutDistanceSlider}"
                              ElementWidth="300"
                              ElementHeight="200"
                              SelectedIndex="3">
            <Controls:ElementFlow.Layout>
                <Controls:CoverFlow />
            </Controls:ElementFlow.Layout>
            <Controls:ElementFlow.Background>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                    <GradientStop Color="#FF181818" />
                    <GradientStop Color="#FF7A7A7A"
                                  Offset="0.5" />
                    <GradientStop Color="#FF1A1A1A"
                                  Offset="1" />
                </LinearGradientBrush>
            </Controls:ElementFlow.Background>
            <Controls:ElementFlow.Camera>
                <PerspectiveCamera FieldOfView="60"
                                   Position="0,3,6"
                                   LookDirection="0,-3,-6" />
            </Controls:ElementFlow.Camera>
        </Controls:ElementFlow>

        <TextBlock Text="F12 to switch views"
                   Foreground="White"
                   FontWeight="Bold"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Right"
                   Margin="10"
                   Grid.Row="0"
                   Grid.Column="1" />

        <TextBlock x:Name="_currentViewText"
                   Foreground="White"
                   FontWeight="Bold"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Right"
                   Margin="10,30,10,10"
                   Grid.Row="0"
                   Grid.Column="1" />
    </Grid>
</UserControl>